/* components */
import { SettingGPTViewTable } from '@src/modules/setting/gpt/components'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { 
  SettingGPTManageTypeCNNmaeEnum,
  SettingGPTManageTypeEnum,
  SettingGPTQuestionTypeCNNmaeEnum, 
  SettingGPTQuestionTypeEnum 
} from '@src/modules/setting/gpt/model'
/* vue */
import { defineComponent, PropType } from 'vue'
/* types */
import { SettingGPTQuestionCountType } from '@gpt/types'
/* utils */
import NP from 'number-precision';

enum SettingGPTQuestionViewTabsEventEnum {
  Input = 'input'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTQuestionViewTabs,
  props: {
    value: {
      type: String as PropType<SettingGPTQuestionTypeEnum>,
      default: SettingGPTQuestionTypeEnum.All
    },
    countMap: {
      type: Object as PropType<SettingGPTQuestionCountType>,
      default: () => ({})
    },
    onInput: {
      type: Function
    }
  },
  data() {
    return {
      currentTab: this.value
    }
  },
  computed: {
    likeCount(): number {
      return this.countMap.likeCount
    },
    dislikeCount(): number {
      return this.countMap.dislikeCount
    },
    unknownCount(): number {
      return this.countMap.unknownCount
    },
    allCount(): number {
      return NP.plus(this.likeCount, this.dislikeCount, this.unknownCount)
    },
    allLabel(): string {
      const countText = this.allCount ? `(${this.allCount})` : ''
      return SettingGPTQuestionTypeCNNmaeEnum[SettingGPTQuestionTypeEnum.All] + countText
    },
    likeLabel(): string {
      const countText = this.likeCount ? `(${this.likeCount})` : ''
      return SettingGPTQuestionTypeCNNmaeEnum[SettingGPTQuestionTypeEnum.Like] + countText
    },
    dislikeLabel(): string {
      const countText = this.dislikeCount ? `(${this.dislikeCount})` : ''
      return SettingGPTQuestionTypeCNNmaeEnum[SettingGPTQuestionTypeEnum.Dislike] + countText
    },
    unknownLabel(): string {
      const countText = this.unknownCount ? `(${this.unknownCount})` : ''
      return SettingGPTQuestionTypeCNNmaeEnum[SettingGPTQuestionTypeEnum.Unknown] + countText
    }
  },
  methods: {
    onTabChangeHandler(tab: SettingGPTQuestionTypeEnum) {
      this.$emit(SettingGPTQuestionViewTabsEventEnum.Input, tab)
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTQuestionViewTabs}>
        
        <span class="setting-gpt-question-view-tabs-title">
          问题类型：
        </span>
        
        <el-tabs
          value={this.value}
          onInput={this.onTabChangeHandler}
        >
          
          {/* start 全部问题 */}
          <el-tab-pane 
            label={this.allLabel}
            name={SettingGPTQuestionTypeEnum.All}
          >
          </el-tab-pane>
          {/* end 全部问题 */}
          
          {/* start 点赞问题 */}
          <el-tab-pane 
            label={this.likeLabel}
            name={SettingGPTQuestionTypeEnum.Like}
          >
          </el-tab-pane>
          {/* end 点赞问题 */}
          
          {/* start 点踩问题 */}
          <el-tab-pane 
            label={this.dislikeLabel}
            name={SettingGPTQuestionTypeEnum.Dislike}
          >
          </el-tab-pane>
          {/* end 点踩问题 */}
          
          {/* start 未知问题 */}
          <el-tab-pane 
            label={this.unknownLabel}
            name={SettingGPTQuestionTypeEnum.Unknown}
          >
          </el-tab-pane>
          {/* end 未知问题 */}
          
        </el-tabs>
        
      </div>
    )
  }
})